<template>
  <div class="card-container" style="height: calc(100vh - 100px);">
    <!--轮播-->
    <el-card shadow="hover" class="box-lb">
      <el-tooltip class="item" effect="light" content="广告位持续招租ing~" placement="right-end">
         <div class="block"  @click="centerDialogVisible = true">
            <el-carousel height="160px">
              <el-carousel-item v-for="(item,index) in images" :key="index">
                <img :src="item.url" alt="撒飒飒">
              </el-carousel-item>
            </el-carousel>
        </div>
    </el-tooltip>
    </el-card>

    <!--工具-->
    <el-card shadow="hover" class="box-tool">
       <div slot="header" class="clearfix">
          <span>新建</span>
          <el-button style="float: right; padding: 3px 0" type="text" class="el-icon-s-tools"></el-button>
       </div>
       <div class="text">
         <div class="wendang"  @click="showWendang">
           <i class="el-icon-edit"></i>
           <p>文档</p>
         </div>
         <div class="fujian" @click="showFujian">
           <i class="el-icon-delete"></i>
           <p>附件</p>
         </div>
      </div>
    </el-card>
    <!-- 发布文档 -->
    <el-dialog
  :visible.sync="dialogVisible"
   :modal=false
  width="30%">
  <div>
    <span>选择位置：</span>
<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      @click.native="selseArea"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    <el-table
      :data="libraryList"
      @row-click="RowClick"
      height="250"
      style="width: 100%">
      <template  v-for="(item, index) in tabHead" :key="index">
        <el-table-column
          
          :prop="item.column_name"
          label="名称"
          width="300px">
        </el-table-column>
      </template>

    </el-table>
  </div>

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
  </span>
</el-dialog>
    <!-- 发布附件 -->
        <el-dialog
  :visible.sync="dialogVisible1"
   :modal=false
  width="30%">
  <div>
    <span>选择位置：</span>
<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      @click.native="selseArea"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    <el-table
      :data="libraryList"
      @row-click="RowClick1"
      height="250"
      style="width: 100%">
          
      <template  v-for="(item, index) in tabHead" :key="index" >
        <el-table-column
          :prop="item.column_name"
          label="名称"
          width="300px">
        </el-table-column>
      </template>

    </el-table>
  </div>

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
  </span>
</el-dialog>
    <!--我的邮记-->
    <el-card shadow="hover" class="box-write"  v-loading="loading1">
         <div slot="header" class="clearfix">
        <span>我的柚记</span>
        <el-button style="float: right; padding: 3px 0" type="text" class="el-icon-s-order" @click="goTime"></el-button>
         </div><el-table :data="timelines" stripe class="tables">
              <el-table-column prop="title" label="名称"  class="table-item">
              </el-table-column>
              <el-table-column prop="source" label="来源" class="table-item">
              </el-table-column>
              <el-table-column prop="time" label="时间" class="table-item">
              </el-table-column>
               <el-table-column prop="tag" label="类型" class="table-item">
                  <template slot-scope="scope">
                   <el-tag
                      type="success"
                      class="table-tag"
                      disable-transitions>{{scope.row.tag ? scope.row.tag : '文档' }}</el-tag>
                  </template>
              </el-table-column>
              <!-- <el-table-column prop="do" label="操作" width="150">
                <el-button type="primary" icon="el-icon-edit" size="mini" circle></el-button>
               <el-button type="danger" icon="el-icon-delete" size="mini" circle></el-button>
              </el-table-column> -->
        </el-table>
    </el-card>
    <!--柚子打卡-->
    <el-card shadow="hover" class="box-card">
      <div slot="header" class="clearfix clock_in">
      <span>每日打卡</span>
      <el-button type="text" @click="date = true"><i class="el-icon-date"></i></el-button>
      <el-dialog
        :visible.sync="date"
        :modal-append-to-body="false"
        width="30%"
        center>
        <el-calendar v-model="month">
        </el-calendar>
      </el-dialog>

      <el-button style="float: right; padding: 3px 0;" type="text" @click="clock" v-if="!flag" class="_clock_in">一键打卡</el-button>
      <nav class="clock_in_success" v-if="flag"><i class="el-icon-success clock_success">今日已打卡</i></nav>
      <el-dialog
          :modal-append-to-body="false"
          :visible.sync="clock_in"
          width="250px"
          center>
          <el-result icon="success">
          <template slot="extra">
            <nav class="text1">今日已打卡!</nav>
            <nav class="text2">本周已打卡{{days}}天</nav>
            <nav class="text3">{{msg}}</nav>
            <el-button type="primary" size="medium" @click="clock_in = false">返回</el-button>
          </template>
          </el-result>
      </el-dialog>
      </div>
      <el-calendar :range="[this.startTime,this.lastTime]" :first-day-of-week=1  v-model="this.thisTime">
        <template
         slot="dateCell"
         slot-scope="{ data }" v-for="(item, index) in [true]" :key="index + item">
            <div class="calendar-day"  :class="{showClock: item}" >{{ data.day.split('-').slice(2).join('-') }}</div>
      </template>
      </el-calendar>
    </el-card>
    <!--柚子小组-->
    <el-card shadow="hover" class="box-group" v-loading="loading2">
       <div slot="header" class="clearfix">
            <span>小组</span>
            <el-button style="float: right; padding: 5px 0" type="text" @click="goGroup">详情</el-button>
      </div>
      <div class="group">
        <el-row class="group-row">
          <div class="isNopic" v-if="allGroup.length === 0">
            <el-empty description="暂无小组"></el-empty>
          </div>
          <el-col :span="6" v-for="item in allGroup" :key="item.id">
              <el-popover
                placement="top"
                width="100"
                trigger="click"
                content="请前往柚子小组查看详情！">
                  <el-card :body-style="{ padding: '0px' }" slot="reference" class="group-card">
                  <div class="image">
                    <img :src="item.cover">
                  </div>
                  <div class="group-black">
                    <span>{{item.groupname}}</span>
                  </div>
                  </el-card>
                </el-popover>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <!--柚子计划-->
    <el-card shadow="hover" class="box-plan" v-loading="loading3">
       <div slot="header" class="clearfix">
          <span>计划</span>
          <el-button style="float: right; padding: 3px 0" type="text" class="el-icon-arrow-right" @click="goPlan"></el-button>
      </div>
      <div v-for="item in planList" :key="item.id">
        <!-- 子组件 -->
        <CardPlan :cardInfo=item></CardPlan>
      </div>
    </el-card>
    <!--公告对话框-->
    <el-dialog title="版本更新说明" :visible.sync="centerDialogVisible" width="30%"  append-to-body  center style="margin-top: 2vh">
      <span>-小有智慧，大有成就-</span>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;小柚智汇——在线文档、项目小组、制定计划一体化平台。小柚帮你记录美好生活，让你不止”小有智慧“，更让你做一个有效学习，高效管理的西邮人！</p>
      <span>【在线文档】</span>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;“柚子记录”，在线编写文档，帮你节省电脑空间；"柚子抽屉"，用目录管理你的笔记，让记录内容更高效~</p>
      <span>【项目管理】</span>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;“柚子小组”：小组内文档共享，快捷收发，组内通知一步到位，一键打卡，提高项目推进效率~</p>
      <span>【柚子时光】</span>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;回忆不变址，帮你记录学习工作点滴，留住你的学习日志，成就感满满~</p>
      <span>【小柚计划】</span>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;制定任务计划，帮你用进度条管理计划进度，工作学习不迷茫！</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="warning" @click="centerDialogVisible = false">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { groupAll, userInfo, getWeakSign, ThreeLine, weekClock, GetAllPlan } from '@/utils/api/homeCard.js'
import { getUserProfile } from '@/utils/api/user'
import { getLibrary } from '@/utils/api/library'
import CardPlan from '@/views/home/components/Card-Plan.vue'
// import { userInfo, Signall } from '@/utils/api/homeCard.js'
import moment from 'moment'
export default {
  name: '',
  components: {
    CardPlan
  },
  props: {},
  // computed: {
  //   thisValue () {

  //   }
  // },
  data () {
    return {
      options: [{
        value: 1,
        label: '抽屉'
      }, {
        value: 2,
        label: '小组'
      }],
      value: 1,
      libraryList: [],
      tabHead: [{ column_name: "name", column_comment: "名字" }],
      uid: null,
      gid: '',
      text: '',
      centerDialogVisible: false, // 公告弹窗
      flag: false,
      month: new Date(),
      date: false, // 打卡日历
      clock_in: false, // 首页打卡
      // 小组信息
      allGroup: [],
      // 轮播图片
      images: [
        {
          url: 'http://exam-1.oss-cn-beijing.aliyuncs.com/png/2021/11/07/16362769209634934.png'
        },
        {
          url: 'http://exam-1.oss-cn-beijing.aliyuncs.com/png/2021/11/06/16361942716419107.png'
        },
        {
          url: 'http://exam-1.oss-cn-beijing.aliyuncs.com/png/2021/11/07/16362769209634934.png'
        }
      ],
      // 个人基本信息
      userInfo: {},
      userId: 0,
      // 存放今日诗句
      msg: '',
      // userSig: {},
      // 本周周一
      startTime: '',
      // 本周周日
      lastTime: '',
      // 当天时间
      thisTime: '',
      // 我的柚记数据
      timelines: [
        {
          source: '',
          tag: '',
          time: '',
          title: '',
          url: '',
        },
        {
          source: '',
          tag: '',
          time: '',
          title: '',
          url: '',
        },
        {
          source: '',
          tag: '',
          time: '',
          title: '',
          url: '',
        },
      ],
      loading1: true,
      loading3: true,
      loading2: true,
      clockDetail: null,
      days: 0,
      today: '',
      // 计划列表
      planList: [],
      dialogVisible: false,
      dialogVisible1: false
      // isClock: [false, false, false, true, false, true, true],
    }
  },
  created () {
    // 获取小组信息
    this.getGroup()
    // 获取用户信息
    this.getuser()
    // 获取当前日期
    this.getDate()
    // this.getSign()

    // 获取我的柚记数据
    this.getTimeLine()
    // 要删的
    this.clockDetail = this.testlist

    // 获取今天星期几
    this.getToday()
    // 获取计划列表
    this.getallplan()
  },
  methods: {
    close () {
      window.sessionStorage.setItem('flage');
      this.centerDialogVisible = false
    },
    // get获取小组信息
    getGroup () {
      groupAll().then(res => {
        if (res.status === 200) {
          this.allGroup = res.data.data.slice(0, 3)
          this.loading2 = false
        } else {
          this.$message({
            type: 'waring',
            message: '小组信息加载失败，请刷新重试！'
          })
        }
      })
    },
    // 获取用户信息
    getuser () {
      userInfo().then(res => {
        this.userInfo = res.data.data
        this.userId = this.userInfo.id
        // 获取每周打卡信息
        getWeakSign(this.userInfo.id).then(res => {
          this.clockDetail = res.data;
          delete this.clockDetail.id
          for (const i in this.clockDetail) {
            if (this.clockDetail[i] === true) {
              this.days++
            }
          }
          this.flag = this.clockDetail[this.today]
        })
      })
    },
    // 展示发布文档框，抽屉
    showWendang () {
      this.dialogVisible = true
      this.selseArea()
    },
    // 展示发布附件框，抽屉
    showFujian () {
      this.dialogVisible1 = true
      this.selseArea()
    },
    selseArea () {
      if (this.value === 1) {
        this.tabHead[0].column_name = 'name'
        this.getLib()
      } else {
        this.tabHead[0].column_name = 'groupname'
        this.libraryList = this.allGroup
      }
    },

    // 获取抽屉列表
    async getLib () {
      const data1 = await getUserProfile();
      this.uid = data1.data.data.id
      const data2 = await getLibrary(this.uid);
      this.libraryList = data2.data.data
    },
    // 点击行,直接跳转
    RowClick (val) {
      if ('name' in val) {
        let thisData = this
        thisData = val
        this.$router.push('/page/wirte/' + thisData.id + '/' + '01')
      } else {
        this.gid = val.id
        this.$router.push('/page/group/writeArticle/' + this.gid)
      }
    },
    RowClick1 (val) {
      if ('name' in val) {
        let thisData = this
        thisData = val
        this.$router.push('/page/wirte/' + thisData.id + '/' + '02')
      } else {
        this.gid = val.id
        this.$notify.info({
          title: '错误',
          message: '小组暂时还能发布附件哦'
        });
      }
    },
    change () {
      this.flag = true
    },
    // 获取计划的前三条
    getallplan () {
      GetAllPlan().then(res => {
        this.planList = res.data.data.reverse().slice(0, 3)
        this.loading3 = false
      })
    },
    // 获取当前的日期
    getDate () {
      this.thisTime = moment().format('YYYY-MM-DD')
      // 今天是本周的第几天
      var weekOfday = moment().format('E');
      // 显示的开始周一时间
      this.startTime = moment().subtract(weekOfday - 1, 'days').format('YYYY/MM/DD');
      // 显示的开始周日时间
      this.lastTime = moment().add(7 - weekOfday, 'days').format('YYYY/MM/DD');// 周日日期
    },
    // 获取最新三条文档数据
    getTimeLine () {
      ThreeLine().then(res => {
        this.timelines = res.data.data
        for (let i = 0; i < this.timelines.length; i++) {
          const a = this.timelines[i].time.split(" ")
          this.timelines[i].time = a[0]
        }
        this.loading1 = false
      })
    },
    getToday () {
      const n = this.thisTime.slice(8, 10) - this.startTime.slice(8, 10) + 1
      switch (n) {
        case 1: this.today = 'mon'; break;
        case 2: this.today = 'tue'; break;
        case 3: this.today = 'wed'; break;
        case 4: this.today = 'thu'; break;
        case 5: this.today = 'pri'; break;
        case 6: this.today = 'sat'; break;
        case 7: this.today = 'sun'; break;
      }
    },
    clock () {
      const data = {
        id: this.userId,
      }
      data[this.today] = true
      weekClock(data).then(res => {
        this.change()
        this.clock_in = true;
        this.days++;
      })
    },
    // 跳转页面
    goGroup () {
      this.$router.push('/page/group/groupShow')
    },
    goPlan () {
      this.$router.push('/page/plans')
    },
    goTime () {
      this.$router.push('/page/time')
    }
  }
}
</script>

<style lang="less" scoped>
.card-container{
  position: relative;
  .box-lb{
    float: left;
    width: 58%;
    margin-left: 3%;
    height: 160px;
    padding: 0;
  -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
    -webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
    box-shadow:2px 2px 10px #909090;/*opera或ie9*/
    .block{
      cursor: pointer;
    }
    img{
      width: 100%;
      height: 160px;
      background-size: cover;
    }
    /deep/.el-card__body{
      padding: 0;
    }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  }
  .box-tool{
    float: right;
    width: 30%;
    height: 160px;
    margin-right: 4%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    /deep/.el-card__body{
      padding: 10;
    }
    span{
      margin-left: 10px;
      font-size: 20px;
      font-weight:500;
    }
    .el-icon-s-tools{
      font-size:25px;
    }
    .text{
      display: flex;
      justify-content:flex-start;
      transition: all 1s linear;
      margin-left: 10px;
      i{
        font-size: 30px;
        color: #fff;
        border-radius: 15px;
        background-color: tomato;
        padding: 5px;
      }
      p{
        font-size: 15px;
        text-align:center;
      }
      .wendang:hover{
        background-color: aliceblue;
        color: tomato;
        cursor:pointer;
      }
      .fujian{
        margin-left: 35px;
      }
      .fujian:hover{
        background-color: aliceblue;
        color: tomato;
        cursor:pointer;
      }
    }
  }
  .box-write{
    margin-top: 15px;
    float: left;
    width: 58%;
    margin-left: 3%;
    height: 250px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    /deep/.el-card__body{
      padding-top: 0px;
    }
    .el-icon-s-order{
      font-size: 25px;
      margin-top: -6px;
    }
    span{
      margin-left: 10px;
      font-size: 20px;font-weight:500;
    }

  }
  .box-card{
    margin-top: 12px;
    float: right;
    width: 30%;
    height: 200px;
    margin-right: 4%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    /deep/.el-calendar__body{
      padding: 0;
    }
    /deep/.el-card__body{
      padding: 0px;
      width: 100%;
    }
    /deep/.el-icon-date{
      display: none;
    }
    /deep/ .el-calendar-table tr td{
      border: none;
    }
    /deep/ .el-calendar-table td.is-selected span{
      background-color: rgb(163,218,136);
      color: black;
    }
    /deep/ .el-calendar-table td.is-selected{
      background-color: white;
    }
    /deep/ .el-calendar-table .el-calendar-day{
      height: 40px;
      text-align: center;
      line-height: 30px;
    }
    /deep/ .el-calendar-table .el-calendar-day{
      background-color: white;
    }
    span{
      margin-left: 10px;
      font-size: 20px;font-weight:500;
    }
    .el-icon-success{
      font-size:15px;
      color: green;
      margin-left: 10px;
    }
    /deep/.el-result__extra{
      margin-top: 0;
    }
    /deep/.el-result__icon svg{
      margin-bottom: 3px;
    }
    /deep/.el-result{
      padding: 0 30px;
    }
    .text1, .text3{
      margin-bottom: 10px;
    }
    .text1{
      font-size: 18px;
    }
    .text2{
      margin-bottom: 15px;
    }
    /deep/.el-button--primary{
      background-color: rgb(237,253,212);
      color: rgb(103,194,58);
      border: rgb(103,194,58);
    }
    /deep/.el-button--primary:hover{
      background-color: rgb(163,218,136);
    }
    .clock_in .el-dialog{
      width: 300px;
    }
    /deep/.el-dialog__header{
      padding-top: 20px;
    }
    .el-icon-date{
      position: absolute;
      right: 76px;
      top: 280px;
      font-size: 18px;
      color: orange;
    }
    .clock_in_success{
      display: inline-block;
      margin-left: 159px;
    }
    .clock_success{
      color: rgb(163,218,136);
    }
    ._clock_in{
      color: orange;
    }
  }
  .tables{
    width: 100%;
    height: 150px;
    .table-item{
      width: 25%;
    }
    .table-tag{
      font-size: 14px;
    }
  }
  .box-group{
    margin-top: 15px;
    float: left;
    width: 58%;
    margin-left:3%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    /deep/.el-card__body{
      padding: 10px;
    }
    span{
      margin-top: 10px;
      margin-left: 10px;
      font-size: 20px;font-weight:500;
    }
    .group{
      .group-row{
        display: flex;
        justify-content: space-between;
        .group-card{
          cursor: pointer;
          transition: all 2s linear;
          position: relative;
          .image {
            width: 100%;
            height: 120px;
            display: block;
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
        .group-card:hover .group-black{
          opacity: 1;
        }
        span{
          margin: 0;
        }
      }
      .group-black{
        position: absolute;
        top: 0;
        width: 200px;
        height: 120px;
        line-height: 120px;
        text-align: center;
        background: rgba(0, 0, 0, 0.3);
        color: white;
        opacity: 0;
      }
    }
          .isNopic{
        width: 60px;
        height: 100px;
        /deep/.el-empty__image{
          width: 100%;
        }
        /deep/.el-empty{
          padding: 0;
        }
        /deep/.el-empty__description{
          margin-top: 0;
        }
      }
  }
  // 计划卡片样式
  .box-plan{
    float: right;
    width: 30%;
    margin-right: 4%;
    height: 240px;
    margin-top: -3%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    .el-progress{
      line-height: 3;
    }
    span{
      margin-top: 10px;
      margin-left: 10px;
      font-size: 20px;
      font-weight:500;
    }
    .el-icon-arrow-right{
      font-size:15px;
      color: blue;
      margin-left: 10px;
    }

  }

  // 打卡高亮
  .showClock{
    background-color: #f1f9eb;
    color: #67c23a;
  }
}
/deep/.el-card__header{
  background-color: #fafafa;
}

</style>
